<template>
  <div class="my_discovery">

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" height="150px" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 宫格 -->
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-image
          src="https://img.51miz.com/Element/00/80/62/39/a4417018_E806239_4fe6190a.png"
        />
        <div>每日推荐</div>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://img.tukuppt.com/png_preview/00/27/95/H92vbZPeNx.jpg!/fw/780"
        />
        <div>私人FM</div>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://img.ixintu.com/download/jpg/202001/de2557a5a2d691ac99dc111550200ff1.jpg"
        />
        <div>歌单</div>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://img.51miz.com/Element/00/88/14/12/d34bcee9_E881412_5df911fe.png"
        />
        <div>排行榜</div>
      </van-grid-item>
    </van-grid>

    <!-- 发现好歌单 -->
    <div class="recommend">
      <h4>发现好歌单</h4>
      <van-button color="#c3c3c3" size="small" round plain>
        <span>查看更多</span>
      </van-button>
    </div>

    <!-- 歌单列表 -->
    <div class="music_card">
      <van-row :gutter="[20, 20]">
        <van-col span="12">
          <img
            src="https://img.51miz.com/Element/00/83/04/47/1cfa03c0_E830447_c91008fd.png"
            alt=""
          />
        </van-col>
        <van-col span="12">
          <img
            src="https://img95.699pic.com/photo/40065/2291.jpg_wh300.jpg!/fh/300/quality/90"
            alt=""
          />
        </van-col>
        <van-col span="12">
          <img
            src="https://img.zcool.cn/community/017ce7576f79c10000018c1bf48f1b.jpg@1280w_1l_2o_100sh.jpg"
            alt=""
          />
        </van-col>
        <van-col span="12">
          <img
            src="https://ts1.cn.mm.bing.net/th/id/R-C.5f103b3c015ff45efceb2136f2e4348a?rik=99mrRF1gtiDcvQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50148%2f9864.jpg_wh860.jpg&ehk=fiwuVzV8MmMfbh3ErMJFpYge%2baIlBvta1rZFOaFKTJg%3d&risl=&pid=ImgRaw&r=0"
            alt=""
          />
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup>
const images = [
  'https://tse3-mm.cn.bing.net/th/id/OIP-C.Tq82kGnNHigGZ0jjctQQjAHaDL?rs=1&pid=ImgDetMain',
  'https://img.zcool.cn/community/01444259f1999ea801202b0c434831.jpg@1280w_1l_2o_100sh.jpg'
];
</script>

<style scoped>
.my_discovery {
  padding: 0 10px;
}

.recommend {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommend span {
  color: #000;
}

.music_card {
  overflow: hidden;
  margin-top: 10px;
}

img {
  width: 100%;
  height: 130px;
}
</style>

